<template>
	<div>
		<draggable v-bind="dragOptions" v-model="myArray" handle=".group_header" item-key="categoryId" @update:model-value="update_item_categoryList">
			<template #item="{ element: item }">
				<div class="group_list">
					<div class="group_header flex flex-pack-justify flex-align-center">
						<div class="group_header_title disabled">{{ item.categoryName }}</div>
						<div class="group_header_nameOperate">
							<el-tooltip effect="dark" content="删除" placement="top">
								<el-icon><Delete @click="deleteItem(item)" /></el-icon>
							</el-tooltip>
						</div>
					</div>
				</div>
			</template>
		</draggable>

		<!--		<draggable-->
		<!--			:list="myArray"-->
		<!--			item-key="id"-->
		<!--			chosen-class="chosen"-->
		<!--			style="height: 100%"-->
		<!--			@start="dragging = true"-->
		<!--			@end="endDraggableEv">-->
		<!--			<template #item="{ element }">-->
		<!--				<div class="group_list">-->
		<!--					<div class="group_header flex flex-pack-justify flex-align-center">-->
		<!--						<div class="group_header_title disabled">{{ element.categoryName }}</div>-->
		<!--						<div class="group_header_nameOperate">-->
		<!--							<el-tooltip effect="dark" content="删除" placement="top">-->
		<!--								<el-icon><Delete @click="deleteItem(element)" /></el-icon>-->
		<!--							</el-tooltip>-->
		<!--						</div>-->
		<!--					</div>-->
		<!--				</div>-->
		<!--			</template>-->
		<!--		</draggable>-->
	</div>
</template>

<script lang="tsx" setup>
import Draggable from 'vuedraggable'
import { Delete } from '@element-plus/icons-vue'
import { ref, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import flowGroup from '@/api/flow/group'
import flowDefinition from '@/api/flow/definition'
import { debounce } from '@/utils'
const dragging = ref(false)
const myArray = ref([])
const sortFinallyValue = ref([])
const dragOptions = {
	animation: 200,
	group: 'processId',
	disabled: false,
	ghostClass: 'ghost'
}

const endDraggableEv = () => {
	dragging.value = false
	editFlowGroup()
}

const editFlowGroup = async () => {
	try {
		const param = JSON.parse(JSON.stringify(myArray.value))
		sortFinallyValue.value = param.map((item: any, index: number) => {
			return { id: item.categoryId, sort: index }
		})
	} catch (e) {
		console.log(e)
	}
}

const deleteItem = item => {
	deleteFlowGroup(item)
}

// 流程组删除
const deleteFlowGroup = async item => {
	try {
		// todo 这里需要判断当前的流程组下是否有实例,有不能删除,没有 直接调用删除接口
		ElMessageBox.confirm('是否删除该分组？', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'error',
			buttonSize: 'default'
		})
			.then(async () => {
				await flowGroup.flowGroupDeleteApi([item.categoryId])
				flowGroupListAll()
				ElMessage({
					message: '删除成功!',
					type: 'success'
				})
			})
			.catch(() => {
				console.log('取消')
			})
	} catch (e) {
		console.log(e)
	}
}

const update_categoryListSort = debounce(() => {
	flowDefinition.updateProcessSortApi(
		myArray.value.map(v => ({
			categoryId: v.categoryId,
			processIds: v.processList && v.processList.length ? v.processList.map(_v => _v.processId) : undefined
		}))
	)
}, 50)
const update_item_categoryList = (values: any[]) => {
	update_categoryListSort()
}

// 流程组列表
const flowGroupListAll = async (item = {}) => {
	try {
		const data = await flowDefinition.flowDefinitionListCategoryApi(item)
		myArray.value = data || []
		console.log(data)
	} catch (e) {
		console.log(e)
	}
}

onMounted(() => {
	nextTick(() => {
		flowGroupListAll()
	})
})

const exportSortData = () => {
	return sortFinallyValue.value
}

defineExpose({
	exportSortData,
	searchProcessEv: flowGroupListAll
})
</script>

<style scoped lang="scss">
.group_list {
	border-radius: 4px;
	box-shadow: rgb(238, 238, 238) 0px 0px 3px 1px;
	background-color: rgb(255, 255, 255);
	font-family: PingFangSC-Regular;
	margin-bottom: 16px;
	cursor: move;
	.group_header {
		height: 54px;
		padding: 0px 16px 0px 12px;
		font-size: 16px;
		line-height: 24px;
		color: rgb(37, 40, 52);
		background-color: var(--el-fill-color-light);
		&_title {
			position: relative;
			//font-family: PingFangSC-Medium;
			display: flex;
			align-items: center;
			&.disabled {
				color: var(--el-text-color-disabled);
			}
		}
		&_nameOperate {
			cursor: pointer;
		}
	}
}

/*被拖拽对象的样式*/
.item {
	padding: 6px;
	background-color: #fdfdfd;
	border: solid 1px #eee;
	margin-bottom: 10px;
	cursor: move;
}
/*选中样式*/
.chosen {
	// border: solid 1px #3089dc !important;
}
</style>
